<div id="mixerEdit" style="height:100%">
    <div class="ui-layout-west" id = "TableAndTimeFilter">
        <div class="ui-layout-center">
            <div class="clearfix tbl mixerEditTable" id="mixerEditTable"></div>
        </div>
        <div id="timeFilter_holder" class="clearfix ui-layout-south"></div>  
    </div>
    <div class="ui-layout-center " id="mixerEditRightPart">
        <div class="ui-layout-north clearfix" id="mixerEditFormHolder">
        </div>
        <div class="ui-layout-center">
            <div class = "clearfix tbl pickingTableHolder" id="pickingTableHolder"></div>
        </div>
        <div class="ui-layout-south">
            <div class = "clearfix tbl mixerTableHolder" id="mixerTableHolder"></div>
        </div>
    </div>
</div>
<script>
    var mixerEditFX = function() {
        var _self = this;
        _self.perform = function() {
            //dodavanje layout-a za parent div
            $("#mixerEdit").layout({
                resizable: false,
                closable: false,
                west__size: "650"
            });
            $("#mixerEditRightPart").layout({
                resizable: false,
                closable: false,
                north__size: "200",
                south__size: "200"
            });
            $("#TableAndTimeFilter").layout({
                resizable: false,
                closable: false,
                south__size: "120"
            });
            $("#mixerEditFormHolder").load("_parts/1_Mixer/EditForm.html?x="+Math.random(), function(){
                $("#mixerEditForm").layout({
                    resizable: false,
                    closable: false,
                    west__size: "50",
                    east__size: "150"
                });
            });
            $("#timeFilter_holder").load("_parts/TimeFilter.html?x="+Math.random(), function() {
                $('.datepicker.hook_dateFrom').datepicker({
                    defaultDate: '-3m',
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', '-3m');
                $('.datepicker.hook_dateTo').datepicker({
                    defaultDate: new Date(),
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', new Date());

                _self.loadYearsForTimeFilter();

                $("#mixerEditTable").addScroll();
                $("#mixerTableHolder").addScroll();
                $("#pickingTableHolder").addScroll();
                $(".timeFilter #row1 .col5").remove();
                $(".timeFilter #row2 .col5").remove();
                $(".timeFilter #row3 .col5").remove();
                $(".timeFilter #row4 .col4").remove();
                _self.loadDataForMixerEdit();
            });
            window.refreshAndSortTable = _self.refreshSortedTable;
        };
        _self.refreshSortedTable = function(table, columnName, ascDesc, callback){
            _self.table = table;
            var params = {};

            if(table == "mixerEditTable")
                params.request = 100;
            if(table == "pickingTableHolder"){
                params.request = 102;
                params.pStart = _self.reqDate;
                params.pOneDay = "oneDay";
            }
            if(table == "mixerTableHolder"){
                params.request = 103;
                params.pStart = _self.reqDate;
                params.pOneDay = "oneDay";
            }

            params.ascDesc = ascDesc;
            params.action = "getItems";

            _self.random = Math.random();
            _self.url = "js/tableParams/" + params.request + ".json?x=" + random;

            $.get(_self.url, function(response) {
                $(response.desc).each(function(index,value){
                    if(value.title == columnName){
                       params.sortItem = value.param;
                        return false;
                    }
                });



                window.tableConstructor.generateTable(params, callback);
            });

        };

        _self.loadYearsForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 100,
                action: 'getYears'
            },
            function(response) {
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_yYear").append("<option>" + value.availableYear + "</option>");
                    $(".timeFilter .hook_mYear").append("<option>" + value.availableYear + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.refresh = function() {
            $("body").css('cursor', 'wait');
            _self.loadDataForMixerEdit(function() {
                $("body").css('cursor', 'default');
            });
        };
        _self.loadDataForMixerEdit = function(callback) {
            var params = {
                request: 100,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataForMixerEditForm = function(date,callback) {

            var day     = date.substring(3,5);
            var month   = date.substring(0,2);
            var year    = date.substring(6,10);

            _self.reqDate = day+"."+month+"."+year;

            var params = {
                request: 101,
                dataType: "json",
                pOneDay: "oneDay",
                pStart : _self.reqDate
            };

            $.getJSON(window.CONSTANTS.SERVICE_URL, params, function(response) {
                $("#101_Date")              .val(response[0].Date)
                $("#101_Shift")             .val(response[0].Shift)
                $("#101_Crew")              .val(response[0].Crew)
                $("#101_MinPerDay")         .val(response[0].MinPerDay)
                $("#101_Exception")         .val(response[0].Exception)
                $("#101_Picking")           .val(response[0].Picking)
                $("#101_Notes")             .val(response[0].Notes)
                $("#101_Dumping")           .val(response[0].Dumping)
                $("#101_Draining")          .val(response[0].Draining)
                $("#101_Working")           .val(response[0].Working)
                $("#101_OverheadTotal")     .val(response[0].OverheadTotal)
                $("#101_OverheadPerPerson") .val(response[0].OverheadPerPerson)
                if (callback) {
                    callback();
                }
            });
        };
        _self.loadDataForPickingTable = function(date,callback) {

            var day     = date.substring(3,5);
            var month   = date.substring(0,2);
            var year    = date.substring(6,10);

            var params = {
                request: 102,
                action: "getItems",
                pOneDay: "oneDay",
                pStart : _self.reqDate
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataForMixerTable = function(date,callback) {

            var day     = date.substring(3,5);
            var month   = date.substring(0,2);
            var year    = date.substring(6,10);

            var params = {
                request: 103,
                action: "getItems",
                pOneDay: "oneDay",
                pStart : _self.reqDate
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.assignEventHandlers = function() {
            $(document).on("click", ".timeFilter button.refresh", function() {
                _self.refresh();
            });

            $(document).on("click", "#mixerEdit #TableAndTimeFilter .scrollable .row.data", function() {

                $("#mixerEdit .scrollable .row.data").removeClass("selected");
                $(this).addClass("selected");

                var date = $($(this).find("div")[0]).html();

                $("body").css('cursor', 'wait');
                 _self.loadDataForMixerEditForm(date,function(){
                    $("body").css('cursor', 'default');
                });

                $("body").css('cursor', 'wait');
                 _self.loadDataForPickingTable(date,function(){
                    $("body").css('cursor', 'default');
                });
                $("body").css('cursor', 'wait');
                _self.loadDataForMixerTable(date,function(){
                    $("body").css('cursor', 'default');
                });
            });
        };
        _self.clearEventHandlers = function() {
            $(document).off("click", ".timeFilter button.refresh");
            $(document).off("click", "#mixerEdit .scrollable .row.data");
        };
    };
    if(!window.mEditFX){
        window.mEditFX = new mixerEditFX();
        window.mEditFX.perform();
        window.mEditFX.clearEventHandlers();
        window.mEditFX.assignEventHandlers();
    }
    else{
        window.mEditFX.perform();
        window.mEditFX.clearEventHandlers();
        window.mEditFX.assignEventHandlers();
    }
</script>